<template>
	<view class="container">
		<!-- 状态筛选 -->
		<view class="filter-tabs">
			<uv-tabs :list="statusTabs" :current="currentIndex" @change="switchStatusByIndex" keyName="label"
				:scrollable="false" active-color="#fe5400" lineColor="#fe5400" inactive-color="#666"
				font-size="28"></uv-tabs>
		</view>

		<!-- 对账单列表 -->
		<scroll-view class="list-container" scroll-y @scrolltolower="loadMore" refresher-enabled
			:refresher-triggered="triggered" @refresherrefresh="onRefresh">
			<!-- 加载状态 -->
			<view v-if="loading && list.length === 0" class="loading-container">
				<uv-loading-icon text="加载中..."></uv-loading-icon>
			</view>

			<!-- 空状态 -->
			<uv-empty v-else-if="list.length === 0" mode="data" text="暂无对账单数据" marginTop="50"></uv-empty>

			<!-- 对账单列表 -->
			<view v-else class="statement-list">
				<view v-for="(item, index) in list" :key="index" class="statement-card" @click="viewDetail(item)">
					<!-- 头部：对账单号和状态 -->
					<view class="card-header">
						<text class="statement-no">对账单号：{{ item.statement_no }}</text>
						<view class="status-badge" :class="getStatusClass[item.status]">
							{{ getStatusText(item.status) }}
						</view>
					</view>

					<!-- 核心信息区域 -->
					<view class="core-info">
						<!-- 金额信息 -->
						<view class="amount-group">
							<view class="amount-item">
								<text class="amount-label">对账金额</text>
								<text class="amount-value">¥{{ item.total_money }}</text>
							</view>
							<view class="amount-item">
								<text class="amount-label">发票金额</text>
								<text class="amount-value secondary">¥{{ item.invoice_total_money }}</text>
							</view>
						</view>

						<!-- 数量信息 -->
						<view class="count-group">
							<view class="count-item">
								<text class="count-icon">📦</text>
								<text class="count-text">{{ item.goods_num }}件商品</text>
							</view>
							<view class="count-item">
								<text class="count-icon">📋</text>
								<text class="count-text">{{ item.order_num }}个订单</text>
							</view>
						</view>
					</view>

					<!-- 时间信息 -->
					<view class="time-info">
						<view class="time-item">
							<text class="time-icon">结算截止：</text>
							<text class="time-text">{{ item.settlement_end_time_text }}</text>
						</view>
						<view class="time-item">
							<text class="time-icon">对账周期开始：</text>
							<text class="time-text">{{ item.statement_start_time_text }}</text>
						</view>
						<view class="time-item">
							<text class="time-icon">对账周期结束：</text>
							<text class="time-text">{{ item.statement_end_time_text }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多 -->
			<view v-if="list.length > 0" class="load-more">
				<uv-load-more :status="loadMoreStatus" :loading-text="'加载中...'" :loadmore-text="'上拉加载更多'"
					:nomore-text="'没有更多数据了'" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: true,
				refreshing: false,
				triggered: false,
				currentStatus: 'all',
				currentIndex: 0,
				statusTabs: [{
						label: '全部',
						value: 'all'
					},
					{
						label: '待结算',
						value: 'pending'
					},
					// {
					// 	label: '已处理',
					// 	value: 'processed'
					// },
					{
						label: '已结算',
						value: 'success'
					}
				],
				list: [],
				pagination: {
					page: 1,
					per_page: 10,
					total: 0,
					last_page: 1
				},
				loadMoreStatus: 'loadmore'
			};
		},
		computed: {
			getStatusClass() {
				return (status) => {
					if (status === 'pending') {
						return 'status-pending';
					} else if (status === 'processed') {
						return 'status-processed';
					} else if (status === 'success' || status === 'settled') {
						return 'status-settled';
					} else {
						return 'status-default';
					}
				};
			},
			getStatusText() {
				return (status) => {
					if (status === 'pending') {
						return '待对账';
					} else if (status === 'success') {
						return '已结算';
					} else {
						return '未知状态';
					}
				};
			}
		},
		onLoad(option) {
			if (option.status) {
				if (option.status === 'pending') {
					this.currentIndex = 1;
					this.currentStatus = option.status;
				}
			}
			this.loadData(true);
		},
		methods: {
			// 切换状态
			switchStatusByIndex(item) {
				this.currentIndex = item.index;
				this.currentStatus = item.value;
				this.loadData(true);
			},

			// 加载数据
			async loadData(reset = false) {
				if (reset) {
					this.pagination.page = 1;
					this.list = [];
					this.loadMoreStatus = 'loadmore';
				}

				if (this.loadMoreStatus === 'nomore') return;

				this.loading = true;
				this.loadMoreStatus = 'loading';

				try {
					const res = await uni.$uv.http.get('/supplier/getStatementList', {
						params: {
							page: this.pagination.page,
							status: this.currentStatus
						}
					});

					if (res.res.code === 1) {
						const newList = res.res.data.list || [];
						if (reset) {
							this.list = newList;
						} else {
							this.list = [...this.list, ...newList];
						}

						this.pagination = {
							page: res.res.data.current_page || 1,
							per_page: res.res.data.per_page || 10,
							total: res.res.data.total || 0,
							last_page: res.res.data.last_page || 1
						};

						if (this.pagination.page >= this.pagination.last_page) {
							this.loadMoreStatus = 'nomore';
						} else {
							this.loadMoreStatus = 'loadmore';
						}
					} else {
						this.$wanlshop.msg(res.res.msg || '获取数据失败');
					}
				} catch (error) {
					console.error('获取对账单列表失败:', error);
					this.$wanlshop.msg('获取失败，请稍后重试');
				} finally {
					this.loading = false;
					this.refreshing = false;
					this.triggered = false;
				}
			},

			// 下拉刷新
			onRefresh() {
				if (this.refreshing) return;
				this.triggered = true;
				this.refreshing = true;
				this.loadData(true);
			},

			// 加载更多
			loadMore() {
				if (this.loadMoreStatus === 'nomore' || this.loading) return;
				this.pagination.page++;
				this.loadData();
			},

			// 查看详情
			viewDetail(item) {
				uni.navigateTo({
					url: `/pages/supplier/statement/detail?id=${item.id}`
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f8f9fa;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.filter-tabs {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 8rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	}

	.list-container {
		height: calc(100vh - 160rpx);
	}

	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 120rpx 0;
	}

	.statement-list {
		display: flex;
		flex-direction: column;
		gap: 16rpx;
	}

	.statement-card {
		background: #ffffff;
		border-radius: 20rpx;
		padding: 24rpx;
		box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
		border: 1rpx solid #f0f0f0;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.statement-no {
		font-size: 26rpx;
		font-weight: 600;
		color: #333;
		flex: 1;
	}

	.status-badge {
		padding: 6rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		font-weight: 500;
	}

	.status-pending {
		background: linear-gradient(135deg, #fff7e6, #ffeed6);
		color: #fa8c16;
		border: 1rpx solid #ffd591;
	}

	.status-processed {
		background: linear-gradient(135deg, #e6f7ff, #d6f0ff);
		color: #1890ff;
		border: 1rpx solid #91d5ff;
	}

	.status-settled {
		background: linear-gradient(135deg, #f6ffed, #edffd6);
		color: #52c41a;
		border: 1rpx solid #b7eb8f;
	}

	.status-default {
		background: #fafafa;
		color: #999;
		border: 1rpx solid #e8e8e8;
	}

	.core-info {
		margin-bottom: 20rpx;
	}

	.amount-group {
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		margin-bottom: 16rpx;
	}

	.amount-item {
		display: flex;
		flex-direction: column;
	}

	.amount-label {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 6rpx;
	}

	.amount-value {
		font-size: 34rpx;
		font-weight: 700;
		color: #ff6b35;
		line-height: 1.2;

		&.secondary {
			font-size: 28rpx;
			color: #666;
			font-weight: 600;
		}
	}

	.count-group {
		display: flex;
		gap: 24rpx;
	}

	.count-item {
		display: flex;
		align-items: center;
		gap: 8rpx;
	}

	.count-icon {
		font-size: 24rpx;
	}

	.count-text {
		font-size: 24rpx;
		color: #666;
	}

	.time-info {
		background: #f8f9fa;
		border-radius: 12rpx;
		padding: 16rpx;
		margin-bottom: 20rpx;
	}

	.time-item {
		display: flex;
		align-items: center;
		gap: 12rpx;
		margin-bottom: 8rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.time-icon {
		font-size: 22rpx;
		color: #999;
		flex-shrink: 0;
	}

	.time-text {
		font-size: 24rpx;
		color: #666;
		line-height: 1.4;
	}

	.load-more {
		padding: 32rpx 0;
	}
</style>